<template>
<div class="app-container demochildren-container">
  <section class="page-box">
    <div class="welcome-container">
      <section class="account-stat mar-b-no">
        <div class="flex-row flex-warp flex-justify-b">
          <div class="inline flex-row ">
            <el-button style="background:#333" size="small" type="info" icon="el-icon-refresh"></el-button>
            <el-button size="small" type="success" icon="el-icon-edit-outline">编辑</el-button>
            <el-button size="small" type="danger" icon="el-icon-delete">删除</el-button>
            <el-button size="small" type="info" icon="el-icon-setting">更多</el-button>
          </div>
          <div class="inline flex-row flex-justify-e flex-align-c">
            <el-input size="small" placeholder="搜索" style="margin-left:0px;width:350px;"></el-input>
            <el-button-group style="vertical-align: top;">
              <el-button size="small" icon="el-icon-tickets"></el-button>
              <el-button size="small" icon="el-icon-menu"></el-button>
              <el-button size="small" icon="el-icon-d-caret"></el-button>
            </el-button-group>
            <el-button size="small" icon="el-icon-search" @click="serchListData"></el-button>
          </div>
        </div>

        <div class="panel-body pad-no caozuo">
          <el-table v-loading="loading" ref="orderTable" :data="tableData" :row-key="getRowKeys" style="width: 100%" border="true" @selection-change="dataListSelectionChange">
            <el-table-column type="selection" min-width="10">
            </el-table-column>
            <el-table-column label="ID" min-width="10">
              <template slot-scope="scope">
                <span>2</span>
              </template>
            </el-table-column>
            <el-table-column label="角色组" min-width="25">
              <template slot-scope="scope">
                <span>默认组</span>
              </template>
            </el-table-column>
            <el-table-column label="用户名" min-width="30">
              <template slot-scope="scope">
                <span>admin</span>
              </template>
            </el-table-column>
            <el-table-column label="昵称" min-width="30">
              <template slot-scope="scope">
                <span>admin</span>
              </template>
            </el-table-column>
            <el-table-column label="电子邮箱" min-width="42">
              <template slot-scope="scope">
                <span>123165464@qq.com</span>
              </template>
            </el-table-column>
            <el-table-column label="手机号" min-width="38">
              <template slot-scope="scope">
                <span>13888848484</span>
              </template>
            </el-table-column>
            <el-table-column label="头像" min-width="20">
              <template slot-scope="scope">
                <img src="https://p1.music.126.net/PWL1reTa7WNkRpAzKNhG_g==/3406287028155660.jpg?param=40y40" height="35" width="35" alt="">
              </template>
            </el-table-column>
            <el-table-column label="等级" min-width="15">
              <template slot-scope="scope">
                <span>1</span>
              </template>
            </el-table-column>
            <el-table-column label="积分" min-width="15">
              <template slot-scope="scope">
                <span>1</span>
              </template>
            </el-table-column>
            <el-table-column label="登录时间" min-width="40">
              <template slot-scope="scope">
                <span>2019-01-02 12:12:01</span>
              </template>
            </el-table-column>
            <el-table-column label="登录IP" min-width="30">
              <template slot-scope="scope">
                <span style="color:#3d8ecb">127.0.0.1</span>
              </template>
            </el-table-column>
            <el-table-column label="加入时间" min-width="40">
              <template slot-scope="scope">
                <span>2019-01-02 12:12:01</span>
              </template>
            </el-table-column>
            <el-table-column label="加入IP" min-width="30">
              <template slot-scope="scope">
                <span style="color:#3d8ecb">127.0.0.1</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" min-width="30">
              <template slot-scope="scope">
                <div class="flex-row flex-align-c">
                  <div class="circle" style="background:#189cbc"></div>
                  <span style="color:#189cbc">&nbsp;正常</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="35">
              <template slot-scope="scope">
                <el-button size="mini" type="success" icon="el-icon-edit-outline"></el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete"></el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-container class="table-footer flex-row flex-justify-b flex-align-c">
            <el-row>
              <div style="margin-top:20px;">显示第 1 到第 2 条记录，总共 2 条记录</div>
            </el-row>
          </el-container>
        </div>
      </section>
    </div>

    <el-dialog title="订单操作" width="40%" :visible.sync="dialogTableVisible" :modal-append-to-body="false">
      <el-form v-if="dialogTableType == 'orderRefun'" ref="creditTable" :data="creditListData" label-width="140px" label-position="right">
        <el-form-item label="订单总额">
          <span>{{refundordermoney}}</span>
        </el-form-item>
        <el-form-item label="退款金额">
          <el-input>
          </el-input>
          <div class="flex-row" style="margin-top: 60px;">

          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="refundMoneyEvt('order')">确认退款</el-button>
          <el-button @click="dialogTableVisible = false">取消</el-button>
        </el-form-item>
      </el-form>

      <el-form v-if="dialogTableType == 'orderNoPay'" ref="creditTable" :data="creditListData" label-width="140px" label-position="right">
        <el-form-item label="商品名称">
          <span>{{changeordername}}</span>
        </el-form-item>
        <el-form-item label="当前总价">
          <span>{{changeoerdermoney}}</span>
        </el-form-item>
        <el-form-item label="修改总价">
          <template slot-scope="scope">
            <el-input class="vip-width"></el-input>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="changeMoneyEvt('order')">确认修改</el-button>
          <el-button @click="dialogTableVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</div>
</template>

<script>
export default {
  name: 'Demochildren',
  components: {},
  mounted() {},
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.demochildren-container {
  & .welcome-container .panel-body {
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 20px;
    padding-left: 116px;

    & .table-footer {
      background: #ffffff;
    }
  }

  & .el-button+.el-button {
    margin-left: 0px;
    margin-bottom: 2px;
  }
  & .circle{
    height: 10px;
    width: 10px;
    border-radius: 10px;
  }
}
</style>
